<template>
  <div>
    <el-row style="margin:20px;">
      <el-col>
        <el-button type="primary" size="medium" @click="showAdd = true,editForm = { }">添加选项</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="voucherPrice" label="购买金额(元)"></el-table-column>
      <el-table-column align="center" prop="voucherMoney" label="代金金额(元)"></el-table-column>
      <el-table-column align="center" prop="astrictMoney" label="限制金额(元)"></el-table-column>
      <el-table-column align="center" prop="duration" label="时长"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="isUse(scope.row.voucherId,1)"
            v-if="scope.row.status == 0"
            type="primary"
            size="mini"
          >启用</el-button>
          <el-button @click="isUse(scope.row.voucherId,0)" v-else type="warning" size="mini">停用</el-button>
          <el-button @click="toEdit(scope.row)" type="primary" size="mini">编辑</el-button>
          <el-button @click="deleteProduct(scope.row.voucherId)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="showAdd" width="50%">
      <el-form :model="editForm" label-width="200px" class="demo-ruleForm">
        <el-form-item label="购买金额(元)： ">
          <el-input-number v-model="editForm.voucherPrice" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="代金金额(元)：">
          <el-input-number v-model="editForm.voucherMoney" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="限制金额(元)：">
          <el-input-number v-model="editForm.astrictMoney" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="时长（天）：">
          <el-input-number v-model="editForm.duration" controls-position="right"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showAdd = false,editForm = { }">取 消</el-button>
        <el-button type="primary" @click="save(),showAdd = false">确 定</el-button>
      </span>
    </el-dialog>
    <h4 style="padding-left:10px;">购买须知</h4>
    <Tinymce v-model="explain" :height="300" style="width: 705px;"></Tinymce>
    <el-button @click="saveExplain()" type="primary">保存</el-button>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { voucherGe, voucherAdd } from "@/api/member";
export default {
  data() {
    return {
      showAdd: false,
      tableData: [],
      explain: "",
      editForm: {
        voucherPrice: "",
        voucherMoney: "",
        astrictMoney: "",
        duration: "",
        voucherId:''
      },
    };
  },
  methods: {
    async saveExplain() {
      
      await voucherAdd({explain: this.explain,type:1}).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
        this.getData();
      });
    },
    toEdit(item) {
      this.editForm = {
        voucherPrice: item.voucherPrice,
        voucherMoney: item.voucherMoney,
        astrictMoney: item.astrictMoney,
        duration: item.duration,
        voucherId:item.voucherId
      };
      this.showAdd = true;
    },
    async deleteProduct(id) {
      await voucherAdd({ voucherId: id,status:-2 }).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
        this.getData();
      });
    },
    async save() {
      if (this.editForm.voucherPrice == "") {
        this.$message.error("请填写购买金额");
      }
      if (this.editForm.voucherMoney == "") {
        this.$message.error("请填写代金金额");
      }
       if (this.editForm.astrictMoney == "") {
        this.$message.error("请填写限制金额");
      }
       if (this.editForm.duration == "") {
        this.$message.error("请填写时长");
      }

        await voucherAdd(this.editForm).then(res => {
          this.$message({
            type: "success",
            message: res.data.data
          });
        });
     

      this.getData();
      this.editForm.voucherId = '';
      this.editForm = {};
    },
    handleClose() {},
    getData() {
      voucherGe().then(res => {
        this.tableData = res.data.data.data;
        this.explain = res.data.data.explain.explain;
      });
    },
    async isUse(id, val) {
      var status = "";
      if (val == 0) {
        status = 0;
      } else {
        status = 1;
      }
      await voucherAdd({
        voucherId: id,
        status: status
      }).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
        this.getData();
      });
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    Tinymce
  }
};
</script>

<style lang="css" scoped>
</style>